<template>
  <wf-el-drawer :title="title" :visible.sync="visible" size="540px" :wrapper-closable="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="岗位名称：" prop="positionName">
        <el-input v-model="form.positionName" :maxlength="20" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="岗位类型：" prop="positionType">
        <el-select v-model="form.positionType" style="width: 100%">
          <el-option label="普通" :value="0"></el-option>
          <el-option label="管理" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职责范围：" prop="jobScope">
        <el-input
          v-model="form.jobScope"
          type="textarea"
          placeholder="请输入内容"
          :maxlength="100"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </wf-el-drawer>
</template>

<script>
  import { addPosition, editPosition } from '@/api/position';
  export default {
    data() {
      return {
        visible: false,
        // 原始数据
        rawData: {
          positionName: '',
          positionType: 0,
          jobScope: '',
        },
        form: {},
        rules: {
          positionName: [{ required: true, message: '请输入岗位名称', trigger: 'change' }],
          positionType: [{ required: true, message: '请选择岗位类型', trigger: 'change' }],
        },
        isEdit: false,
      };
    },
    computed: {
      title() {
        return this.isEdit ? '编辑岗位' : '新增岗位';
      },
    },
    methods: {
      open(organizationId) {
        this.isEdit = false;
        this.form = { ...this.rawData, organizationId };
        this.visible = true;
      },
      edit(row) {
        this.isEdit = true;
        this.form = { ...row };
        this.visible = true;
      },
      save() {
        this.$refs['form'].validate(async valid => {
          if (valid) {
            this.form.id ? await editPosition(this.form) : await addPosition(this.form);
            this.$emit('saved');
            this.cancel();
          }
        });
      },
      cancel() {
        this.$refs['form'].resetFields();
        this.visible = false;
      },
    },
  };
</script>

<style></style>
